<template>
  <div class="app-container">
    <div>
      <div style="padding-top:15px;padding-left:10px;">
        <el-input
          v-model.trim="listQuery.CourseName"
          size="small"
          placeholder="课程名称"
          style="width: 400px;margin-right: 15px;"
          class="filter-item"
          @keyup.enter.native="getList(1)"
        />
        <label style="font-size: 14px;font-weight: 400;">开课日期：</label>
        <el-date-picker
          size="small"
          class="filter-item"
          style="width: 150px;margin-right: 15px;"
          placeholder="开始日期"
          v-model="listQuery.SearchBegin"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="datetime"
        />
        <label style="font-size: 14px;font-weight: 400;margin-right: 15px;">至</label>
        <el-date-picker
          size="small"
          class="filter-item"
          style="width: 150px;margin-right: 15px;"
          placeholder="结束日期"
          v-model="listQuery.SearchEnd"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="datetime"
        />
        <el-button
          style="width: 100px;"
          type="primary"
          @click="getList(1)"
          size="small"
          icon="el-icon-search"
        >查询</el-button>
      </div>
    </div>
    <div>
      <el-table
        v-loading="loading"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="views"
        style="width: 100%;margin-top:30px;"
        border
        @sort-change="sortChange"
      >
        <el-table-column label="课程名称" sortable="custom" prop="CourseName">
          <template slot-scope="scope">{{ scope.row.CourseName }}</template>
        </el-table-column>
        <el-table-column label="开课日期" sortable="custom" prop="CourseBeginDate">
          <template slot-scope="scope">{{ scope.row.CourseBeginDate | formatDate }}</template>
        </el-table-column>
        <el-table-column label="课程章节数" sortable="custom" prop="CourseChilds">
          <template slot-scope="scope">{{ scope.row.CourseChilds }}</template>
        </el-table-column>
        <el-table-column label="课程报名数" sortable="custom" prop="CourseApplys">
          <template slot-scope="scope">{{ scope.row.CourseApplys }}</template>
        </el-table-column>
        <el-table-column label="课程点赞数" sortable="custom" prop="CourseLikes">
          <template slot-scope="scope">{{ scope.row.CourseLikes }}</template>
        </el-table-column>
        <el-table-column label="评价总分数" sortable="custom" prop="CommentScores">
          <template slot-scope="scope">{{ scope.row.CommentScores }}</template>
        </el-table-column>
        <el-table-column label="评价总人数" sortable="custom" prop="CommentPeoples">
          <template slot-scope="scope">{{ scope.row.CommentPeoples }}</template>
        </el-table-column>
        <el-table-column label="评价平均分" sortable="custom" prop="CommentAvg">
          <template slot-scope="scope">{{ scope.row.CommentAvg }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top:30px">
      <go-page
        v-model="listQuery.Page"
        :pageSize="listQuery.PageSize"
        :total="listQuery.Total"
        @pagination="getList()"
      />
    </div>
  </div>
</template>

<script>
import { reqGetAreaCitys } from "@/api/areacity";
import { reqCommentReport } from "@/api/report/coursereport";

import GoPage from "./components/gopage";

export default {
  components: {
    GoPage
  },
  data() {
    return {
      listQuery: {
        AreaCode: null,
        ProvinceCode: null,
        CityCode: null,
        CourseName: "",
        DealerCode: "",
        DealerName: "",
        ManagementCode: "",
        ManagementName: "",
        SearchBegin: new Date("2019-08-01"),
        SearchEnd: new Date(),
        Page: 1,
        PageSize: 8,
        Total: 0,
        OrderBy: "CreateTime",
        IsAsc: true
      },
      query: {
        Page: 1,
        PageSize: 10000,
        Total: 0,
        OrderBy: "AreaCode",
        IsAsc: true,
        TypeLevel: -1,
        AreaCode: -1,
        AreaName: "",
        ProvinceCode: -1,
        ProvinceName: "",
        CityCode: -1,
        CityName: ""
      },
      loading: true,
      views: [],
      areaCitys: [],
      areaDatas: [],
      provinceDatas: [],
      cityDatas: []
    };
  },
  computed: {
    // 计算属性，只要相关联的值没有改变，直接返回，不再进行计算，与方法区别，缓存
  },
  created() {
    // 实例创建完成后执行的代码
    this.getList();
    this.searchInit();
  },
  methods: {
    // -----------------------------------------------初始化模块
    // list
    async getList(page1) {
      this.loading = true;
      if (page1 === 1) {
        this.listQuery.Page = 1;
      }
      let res = await reqCommentReport(this.listQuery);
      if (res.code === 200) {
        this.views = res.data.Items;
        this.listQuery.Total = res.data.TotalItems;
      }
      this.loading = false;
    },
    // 区、省、市数据初始化
    async searchInit() {
      let res = await reqGetAreaCitys(this.query);
      if (res.code === 200) {
        this.areaCitys = res.data.Items;
        this.areaDatas = this.areaCitys.filter(s => s.TypeLevel === 1);
        this.provinceDatas = this.areaCitys.filter(s => s.TypeLevel === 2);
        this.cityDatas = this.areaCitys.filter(s => s.TypeLevel === 3);
      }
    },
    // -----------------------------------------------搜索模块
    // 区域下拉搜索
    AreaSearch() {
      if (this.listQuery.AreaCode) {
        this.provinceDatas = this.areaCitys.filter(
          s => s.TypeLevel === 2 && s.AreaCode === this.listQuery.AreaCode
        );
        this.cityDatas = this.areaCitys.filter(
          s => s.TypeLevel === 3 && s.AreaCode === this.listQuery.AreaCode
        );
      } else {
        this.provinceDatas = this.areaCitys.filter(s => s.TypeLevel === 2);
        this.cityDatas = this.areaCitys.filter(s => s.TypeLevel === 3);
      }
      this.listQuery.ProvinceCode = null;
      this.listQuery.CityCode = null;
      this.getList(1);
    },
    // 省份下拉搜索
    ProvinceSearch() {
      if (this.listQuery.ProvinceCode) {
        this.cityDatas = this.areaCitys.filter(
          s =>
            s.TypeLevel === 3 && s.ProvinceCode === this.listQuery.ProvinceCode
        );
      } else {
        if (this.listQuery.AreaCode)
          this.cityDatas = this.areaCitys.filter(
            s => s.TypeLevel === 3 && s.AreaCode === this.listQuery.AreaCode
          );
        else this.cityDatas = this.areaCitys.filter(s => s.TypeLevel === 3);
      }
      this.listQuery.CityCode = null;
      this.getList(1);
    },
    // 城市下拉搜索
    CitySearch() {
      this.getList(1);
    },
    // table排序
    sortChange(data) {
      if (data.order === "ascending") this.listQuery.IsAsc = true;
      else this.listQuery.IsAsc = false;
      this.listQuery.OrderBy = data.prop;
      this.getList(1);
    }
    // -----------------------------------------------业务操作模块
  }
};
</script>

<style lang="scss" scoped>
</style>